<template>
  <div class="app-container">
    <el-config-provider :locale="zhCn">
      <!-- 全局菜单按钮 -->
      <div class="global-menu-btn" @click="toggleGlobalMenu" v-if="isAuthenticated && !isLoginPage" style="position: fixed; top: 10px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(24, 144, 255, 0.8); color: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; font-size: 22px;">
        <el-tooltip content="菜单" placement="bottom">
          <el-icon><Menu /></el-icon>
        </el-tooltip>
      </div>

      <!-- 全局菜单面板 -->
      <div v-if="globalMenuVisible && isAuthenticated && !isLoginPage" class="global-menu-panel">
        <div class="menu-header">
          <div class="menu-title">系统菜单</div>
          <div class="menu-close" @click="toggleGlobalMenu">
            <el-icon><Close /></el-icon>
          </div>
        </div>
        <div class="menu-content">
          <div class="menu-item" @click="navigateTo('/dashboard')" :class="{ 'active': isActivePath('/dashboard') }">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </div>
          <div class="menu-item" @click="navigateTo('/devices')" :class="{ 'active': isActivePath('/devices') }">
            <el-icon><Setting /></el-icon>
            <span>设备管理</span>
          </div>
          <div class="menu-item" @click="navigateTo('/statistics')" :class="{ 'active': isActivePath('/statistics') }">
            <el-icon><TrendCharts /></el-icon>
            <span>生产统计</span>
          </div>
          <div class="menu-item" @click="navigateTo('/batches')" :class="{ 'active': isActivePath('/batches') }">
            <el-icon><List /></el-icon>
            <span>批次管理</span>
          </div>
          <div class="menu-item" @click="navigateTo('/employees')" :class="{ 'active': isActivePath('/employees') }">
            <el-icon><User /></el-icon>
            <span>员工管理</span>
          </div>
          <div class="menu-item" @click="navigateTo('/users')" v-if="isAdmin" :class="{ 'active': isActivePath('/users') }">
            <el-icon><UserFilled /></el-icon>
            <span>用户管理</span>
          </div>
          <div class="menu-item" @click="navigateTo('/roles')" v-if="isAdmin" :class="{ 'active': isActivePath('/roles') }">
            <el-icon><Key /></el-icon>
            <span>角色管理</span>
          </div>
        </div>
      </div>

      <!-- 遮罩层 -->
      <div v-if="globalMenuVisible" class="menu-overlay" @click="toggleGlobalMenu"></div>

      <!-- 主内容区 -->
      <div class="main-content">
        <router-view />
      </div>
    </el-config-provider>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  User, UserFilled, Key, Setting, 
  HomeFilled, TrendCharts, List,
  Menu, Close 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { useAuthStore } from '@/stores/auth'
import api from '@/services/api'

// 路由和认证相关
const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

// 全局菜单状态
const globalMenuVisible = ref(false)

// 检测是否在登录页面
const isLoginPage = computed(() => {
  return route.path === '/login'
})

// 认证相关计算属性
const isAuthenticated = computed(() => authStore.isAuthenticated)
const currentUser = computed(() => authStore.user)
const isAdmin = computed(() => authStore.isAdmin)

// 切换全局菜单显示/隐藏
const toggleGlobalMenu = () => {
  globalMenuVisible.value = !globalMenuVisible.value

  // 如果菜单打开，禁止body滚动
  if (globalMenuVisible.value) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }
}

// 导航到指定页面
const navigateTo = (path) => {
  router.push(path)
  globalMenuVisible.value = false
}

// 检查当前路径是否激活
const isActivePath = (path) => {
  return route.path === path
}

// // 处理下拉菜单命令
// const handleCommand = (command) => {
//   switch (command) {
//     case 'profile':
//       // 暂时只显示信息，后续可以添加个人信息页面
//       ElMessage.info(`用户名: ${currentUser.value?.username}, 邮箱: ${currentUser.value?.email}`)
//       break
//     case 'changePassword':
//       changePasswordDialogVisible.value = true
//       break
//     case 'logout':
//       authStore.logout()
//       router.push('/login')
//       ElMessage.success('已成功退出登录')
//       break
//   }
// }

// 移除了菜单相关的代码
</script>

<style>
/* 基础样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  background-color: #0a1929;
  color: #fff;
}

#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.app-container {
  height: 100%;
  width: 100%;
  position: relative;
}

/* 主内容区 */
.main-content {
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: #0a1929;
  transition: all 0.3s ease;
}

/* 全局菜单按钮 */
.global-menu-btn {
  position: fixed;
  top: 20px;
  right: 120px; /* 调整位置，与用户信息保持足够距离 */
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: rgba(24, 144, 255, 0.8); /* 使用更高对比度的颜色 */
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  font-size: 22px;
}

.global-menu-btn:hover {
  background-color: #1890ff;
  transform: scale(1.1); /* 悬停时的放大效果 */
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.5); /* 增强悬停时的阴影 */
}

/* 全局菜单面板 */
.global-menu-panel {
  position: fixed;
  top: 75px; /* 与菜单按钮保持适当距离 */
  right: 120px; /* 与菜单按钮对齐 */
  width: 250px;
  background-color: rgba(0, 21, 41, 0.95); /* 增强不透明度 */
  border-radius: 12px; /* 增大圆角 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); /* 增强阴影效果 */
  z-index: 1001; /* 确保菜单面板始终在最上层 */
  overflow: hidden;
  backdrop-filter: blur(10px); /* 增强模糊效果 */
  border: 1px solid rgba(24, 144, 255, 0.5); /* 增强边框颜色 */
  animation: slide-in-right 0.3s ease-out; /* 修改为右侧滑入动画 */
  transform-origin: top right; /* 设置变形原点 */
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px; /* 增加内边距 */
  background: linear-gradient(90deg, rgba(0, 21, 41, 0.9) 0%, rgba(24, 144, 255, 0.3) 100%); /* 增强渐变效果 */
  border-bottom: 2px solid rgba(24, 144, 255, 0.5); /* 增强边框 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

.menu-title {
  font-size: 18px; /* 增大字体 */
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 添加文字阴影 */
  letter-spacing: 1px; /* 增加字间距 */
}

.menu-close {
  cursor: pointer;
  color: #fff;
  transition: all 0.3s ease;
  width: 30px; /* 设置固定宽度 */
  height: 30px; /* 设置固定高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* 圆形按钮 */
  background-color: rgba(255, 255, 255, 0.1); /* 添加背景色 */
}

.menu-close:hover {
  color: #1890ff;
  background-color: rgba(255, 255, 255, 0.2); /* 悬停时增强背景色 */
  transform: rotate(90deg); /* 旋转效果 */
}

.menu-content {
  padding: 15px 10px; /* 增加内边距 */
  max-height: 70vh; /* 限制最大高度，防止菜单过长 */
  overflow-y: auto; /* 内容过多时显示滚动条 */
}

/* 自定义滚动条样式 */
.menu-content::-webkit-scrollbar {
  width: 6px;
}

.menu-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.menu-content::-webkit-scrollbar-thumb {
  background: rgba(24, 144, 255, 0.5);
  border-radius: 3px;
}

.menu-content::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 144, 255, 0.7);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px; /* 增加内边距，扩大可点击区域 */
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  border-left: 3px solid transparent; /* 添加左侧边框，用于悬停效果 */
  margin-bottom: 2px; /* 增加间距，使菜单项更易区分 */
}

.menu-item:hover {
  background-color: rgba(24, 144, 255, 0.2); /* 增强悬停背景色 */
  color: #1890ff;
  border-left: 3px solid #1890ff; /* 悬停时显示左侧边框 */
  padding-left: 23px; /* 悬停时的偏移效果 */
}

/* 活动状态样式 */
.menu-item.active {
  background-color: rgba(24, 144, 255, 0.3); /* 活动状态背景色比悬停状态更深 */
  color: #1890ff;
  border-left: 3px solid #1890ff;
  padding-left: 23px;
  font-weight: bold; /* 加粗文字 */
  box-shadow: inset 0 0 10px rgba(24, 144, 255, 0.1); /* 内阴影效果 */
}

.menu-item .el-icon {
  margin-right: 12px;
  font-size: 20px; /* 增大图标大小 */
}

.menu-item span {
  font-size: 16px; /* 增大文字大小 */
  font-weight: 500; /* 增加字重 */
}

/* 遮罩层 */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

/* 动画 */
@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 确保ECharts图表容器有明确的高度 */
.chart-container {
  min-height: 300px;
}

/* 用户菜单样式 - 移动到时间显示的左侧 */
.user-menu {
  position: fixed;
  top: 20px; /* 与全局菜单按钮高度一致 */
  right: 175px; /* 调整位置，使其在时间显示的左侧，保由5个像素的间距 */
  z-index: 1000; /* 确保始终在最上层 */
}

.user-info {
  display: flex;
  align-items: center;
  background-color: rgba(0, 21, 41, 0.9);
  padding: 5px 15px;
  border-radius: 25px;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(24, 144, 255, 0.5);
  transition: all 0.3s ease;
  min-width: 120px; /* 确保有足够的宽度 */
}

.user-info:hover {
  background-color: #1890ff;
}

.username {
  margin: 0 8px;
  font-size: 14px;
}

/* 对话框样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
</style>






